<template>
  <el-dialog title="创建连接" :visible.sync="createLinkModalShow" :width="modalWidth">
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        连接名称:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入连接名"
          v-model="newLinkInfo.name">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        数据库:
      </el-col>
      <el-col :span="14">
        <el-select v-model="newLinkInfo.databaseType" placeholder="请选择">
          <el-option :value="db.name" v-for="(db,index) in dbs" :key="index" :disabled="db.disabled">{{db.desp}}</el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        主机:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入主机IP"
          v-model="newLinkInfo.host">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        用户名:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入用户名"
          v-model="newLinkInfo.user">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        密码:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入密码"
          v-model="newLinkInfo.password">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        端口号:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入端口号"
          v-model="ports[newLinkInfo.databaseType]">
        </el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-show="newLinkInfo.databaseType==='oracle'">
      <el-col :span="8" class="lable">
        服务名:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入服务名"
          v-model="newLinkInfo.service">
        </el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="createLinkModalShow = false">取 消</el-button>
      <el-button type="primary" @click="createLink">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "CreateLinkModal",
    data(){
      return {
        dbs:[
          {name:"mysql",desp:"mysql",disabled:false},
          {name:"mariadb",desp:"mariadb",disabled:false},
          {name:"oracle",desp:"oracle",disabled:false},
          {name:"sqlserver",desp:"sqlServer",disabled:false}
        ],
        ports:{
          mysql:3306,
          mariadb:3306,
          oracle:1521,
          sqlserver:1433
        }
      }
    },
    computed: {
      ...mapState(["newLinkInfo","modalWidth"]),
      createLinkModalShow: {
        get() {
          return this.$store.getters.createLinkModalShow;
        },
        set(flag) {
          this.$store.dispatch("createLinkModalShow", flag);
        }
      }
    },methods:{
      createLink(){
        this.newLinkInfo.port = this.ports[this.newLinkInfo.databaseType];
        this.$store.dispatch("saveLink");
        this.$store.dispatch("createLinkModalShow", false);
      }
    }
  }
</script>

<style scoped>
  .lable {
    padding: 10px;
    text-align: right;
  }
  .el-row{
    margin-bottom: 10px;
  }
  .el-row:last-child{
    margin-bottom: 0;
  }
  .el-col-14{
    width: 45.333%;
  }
</style>
